<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>CSS3 Perspective Playground</h2>
      <main>
        <section class="settings">
          <div class="settings-container">
            <label>perspective: {{perspective}} px;</label>
            <input title="perspective" type="range" min="0" max="999" v-model="perspective" />


            <label>rotateX: {{rotateX}} deg; </label>
            <input title="rotateX" type="range" min="-180" max="180" v-model="rotateX" />

            <label>rotateY: {{rotateY}} deg; </label>
            <input title="rotateY" type="range" min="-180" max="180" v-model="rotateY" />

            <label>rotateZ: {{rotateZ}} deg; </label>
            <input title="rotateZ" type="range" min="-180" max="180" v-model="rotateZ" />

            <button type="button" v-on:click="reset">Reset</button>
          </div>
        </section>
        <section class="output">
          <div class="box-container">
            <!-- Set style -->
            <div class="box" v-bind:style="{transform: transform}"></div>

          </div>
        </section>
      </main>
    </div>

    <script src="./main.js"></script>
  </body>
</html>